*{
    margin: 0;
    padding: 0;
}
body{
    /* 弹性盒模型 */
    display: flex;
    /* 垂直水平居中 */
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #e0e0e0;
}
#wrap{
    display: flex;
    /* 让一行中的元素平均分配宽度 */
    justify-content: space-around;
    /* align-items: center; */
    /* 一行中放不下就自动分配一行 */
    flex-wrap: wrap;
    width: 700px;
    height: 600px;
}
#wrap .box{
    display: flex;
    /* 让在同一个元素中的图片和文字垂直居中 */
    justify-content: space-around;
    align-items: center;
    /* 属性决定主轴的方向 起点在上沿 */
    flex-direction: column;
    width:100px;
    height: 140px;
    margin: 20px;
    cursor: pointer;
}
#wrap .box .img{
    display: flex;
    justify-content: center;
    /* 属性定义项目在交叉轴上如何对齐 交叉的中心点对齐，也就是水平垂直居中 */
    align-items: center;
    width: 100px; 
    height: 100px;
    border-radius: 20px; 
    /* 盒子阴影 */
    box-shadow: 18px 18px 30px rgba(0,0,0,.2),
    -18px -18px 30px rgba(255,255,255,1);
    /* 过渡时间 ease-out是指先快速 后慢速 */
    transition: all .2s ease-out;
    
}
#wrap .box .img img{
    width: 60px;
    transition: all .2s ease-out;
}
#wrap .box p{
    color: slateblue;
}
#wrap .box .img:hover{
    /* inset 是内部阴影 默认是外部阴影outset */
    box-shadow: 0 0 0 rgba(0,0,0,.2), 0 0 0 rgba(255,255,255,.8),
    inset 18px 18px 30px rgba(0,0,0,.3),
    inset -18px -18px 30px rgba(255,255,255,1);
}
#wrap .box .img:hover img{
    width: 55px;
}